<template>
  
    <div>
        <!-- 新建补卡规则 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <router-link to="/OvertimeAdd"><el-button type="primary"  style="margin: 20px;">新建加班规则</el-button></router-link>
                    <div style="margin: 20px;width: 400px;float: right;">
                        <el-input placeholder="请输入内容" v-model="rulesName" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="getReplacementCards()"></el-button>
                        </el-input>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 展示参数start -->
        <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <br>
                <el-table
                  :data="overtimes"
                  border
                  style="width: 95%;margin: auto;"
                  :header-cell-style="{backgroundColor:'#F4F4F4'}">
                  <el-table-column
                    prop="overtimeName"
                    label="规则名称">
                  </el-table-column>
                  <el-table-column
                    label="规则内容"
                    width="400px">
                    <template slot-scope="scope">
                      <span>
                        工作日:
                        <span v-if="scope.row.week==undefined">
                          禁止加班
                        </span>
                        <span v-else>
                          <span v-if="scope.row.week.approval==1">
                            加班无需审批，
                          </span>
                          <span v-else>
                            加班必须审批，
                          </span>
                          <span v-if="scope.row.week.overtimeClock==1">
                            根据审批时间为准
                          </span>
                          <span v-else>
                            根据打卡时间为准
                          </span>
                        </span>
                        
                        <br>
                        休息日:
                        <span v-if="scope.row.rest==undefined">
                          禁止加班
                        </span>
                        <span v-else>
                          <span v-if=" scope.row.rest.approval==1">
                            加班无需审批，
                          </span>
                          <span v-else>
                            加班必须审批，
                          </span>
                          <span v-if="scope.row.rest.overtimeClock==1">
                            根据审批时间为准
                          </span>
                          <span v-else>
                            根据打卡时间为准
                          </span>
                        </span>
                       
                        
                        
                        <br>
                        节假日:
                        <span v-if="scope.row.holi==undefined">
                          禁止加班
                        </span>
                        <span v-else>
                          <span v-if="scope.row.holi.approval==1">
                            加班无需审批，
                          </span>
                          <span v-else>
                            加班必须审批，
                          </span>
                          <span v-if="scope.row.holi.overtimeClock==1">
                            根据审批时间为准
                          </span>
                          <span v-else>
                            根据打卡时间为准
                          </span>
                        </span>

                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="应用范围">
                    <template slot-scope="scope">
                      <span v-if="scope.row.replacementApplyId==0">
                        全公司
                      </span>
                      <span v-else>
                        {{ scope.row.overtimeApplyName }}
                      </span>
                    </template>

                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="upData(scope.row.id,1)">修改</el-button>
                      <el-button type="text" @click="upData(scope.row.id,0)">删除</el-button>
                    </template>
                  </el-table-column>


                </el-table>
                <br>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[10, 100, 200, 400]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  style="margin-left: 750px;">
                </el-pagination>
                <br>
              </div>
            </el-col>
        </el-row>
        <!-- 展示参数end -->
    </div>
  </template>
  
  <script>
import axios from 'axios';
  export default {
      name:"attendanceIndex.vue",
      data(){
          return{
            rulesName: "",
            overtimes:[],
            pageNum:0,
            pageSize:10,
            total:0,
            replacementCard:{},
          }
      },
      created(){
        this.getReplacementCards();
      },
      methods:{
        getReplacementCards(){
          // 获取补卡信息
          axios.post("/overtime/findAllOvertime?"+"pageSize="+this.pageSize+"&pageNum="+this.pageNum,{overtimeName:this.rulesName})
          .then((res)=>{
            console.log(res)
            this.overtimes = res.data.rows; 
            this.total = res.data.total;
          })
        
        }, 

        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.getReplacementCards();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
          this.getReplacementCards();
        },

        // 修改/删除补卡规则
        upData(overtimeId,status){
          if(status==0){
            this.replacementCard.id = replacementCardId;
            this.replacementCard.replacementCardStatus = status;
            axios.post("/ReplacementCard/upAndDeleteReplacementCard",this.replacementCard)
            .then((res)=>{
              this.getReplacementCards();
              if(res.data==1){
                this.$message({
                  message:"删除成功!!!",
                  type:"success"
                });
              }else{
                this.$message.error("删除失败请重试!");
              }
            })
          }else{
            this.$router.push({name:"overtimeAdd",params:{id:overtimeId}});
          }
          
        },
      }
  }
  </script>
  
  <style scoped>
    .el-row {
      margin-bottom: 20px;
      
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: white;
    }
    .grid-content {
      border-radius: 8px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .el-icon-search{
        display: block;
    }




  /* 防止地图自动完成的对象被遮挡 */
  .tangram-suggestion {
    z-index: 9999;
  }
  </style>